<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				list-style: none;
			}

			#list {
				min-width: 30px;
				max-width: 200px;
				background-color: skyblue;
				padding-left: 0;
				text-align: center;
			}

			.item:hover {
				color: yellow;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<button onclick="baiFirst()">获取第一个</button>
			<button onclick="baiSec()">获取第二个</button>
		</div>
		<ul id="list"></ul>
		<script>
			var baiFirst = function() {
				fetch("https://music.91q.com/v1/tracklist/category?sign=14b7c5bb678eb7e784778812189d0aa5&appid=16073360&timestamp=1726728306", {
					method: 'GET',
					headers: {
						"Content-Type": "application/json",
					}
				}).then(res => res.json()).then(res => {
					creatList(res.data, "first")
				}).catch(error => {
					console.log(error)
				})
			}

			var baiSec = function() {
				fetch("http://120.53.228.8:425/api?sign=14b7c5bb678eb7e784778812189d0aa5&appid=16073360&timestamp=1726728306", {
					method: 'GET',
					headers: {
						"Content-Type": "application/json",
					}
				}).then(res => res.json()).then(res => {
					creatList(res.data, "second")
				}).catch(error => {
					console.log(error)
				})
			}

			function creatList(data, name) {
				var listBox = document.getElementById("list")
				listBox.innerHTML = ""
				for (let i = 0; i < data.length; i++) {
					var item = document.createElement("li")
					item.innerHTML = data[i].categoryName + name
					item.className = "item"
					listBox.appendChild(item)
				}
			}
		</script>
	</body>
</html>